import 'package:ac/common/ac_chat_util.dart';
import 'package:ac/common/ac_pv_manager.dart';
import 'package:ac/common/style.dart';
import 'package:ac/data/ac_user_manager.dart';
import 'package:ac/route/ac_route_pages.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_me_logic.dart';

class AcMePage extends StatelessWidget {
  final logic = Get.find<AcMeLogic>();
  final state = Get
      .find<AcMeLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: [
          Container(
              height: 322.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/user_detail_bg.png"),
                  fit: BoxFit.fill,
                ),
              )),
          ListView(
            padding: EdgeInsets.only(
                top: 56.h + ScreenUtil().statusBarHeight,
                left: 20.w,
                right: 20.w),
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Obx(() {
                        return ClipOval(
                          child: Container(
                            padding: EdgeInsets.all(2.w),
                            color: Colors.white,
                            width: 88.w,
                            height: 88.w,
                            child: ClipOval(
                              child: CachedNetworkImage(
                                imageUrl:
                                logic.userInfo.value?.avatarThumbUrl ?? "",
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        );
                      }),
                      Positioned(
                        bottom: 0,
                        right: 0,
                        child: GestureDetector(
                          onTap: logic.updateAvatar,
                          child: Image.asset(
                            "images/icon_camera.png",
                            width: 26.w,
                            height: 26.w,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 15.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Obx(() {
                    return Text(
                      logic.userInfo.value?.nickname ?? "",
                      maxLines: 1,
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                        overflow: TextOverflow.ellipsis,
                      ),
                      textAlign: TextAlign.center,
                    );
                  }),
                  SizedBox(width: 8.w),
                  GestureDetector(
                    onTap: () {
                      Get.toNamed(AcRouteNames.editProfile)
                          ?.then((value) => logic.userInfo.refresh());
                    },
                    child: Image.asset(
                      "images/icon_edit.png",
                      width: 16.w,
                    ),
                  ),
                ],
              ),
              SizedBox(height: 13.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "ID : ${logic.userInfo.value?.userId ?? ""}",
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.white.withOpacity(0.8),
                    ),
                  ),
                  SizedBox(width: 6.w),
                  GestureDetector(
                    onTap: () {
                      // 复制到粘贴板
                      Clipboard.setData(
                        ClipboardData(text: logic.userInfo.value?.userId ?? ""),
                      );
                      EasyLoading.showToast("Copy Success");
                    },
                    child: Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: 4.w,
                      ).add(EdgeInsets.only(bottom: 1.h)),
                      decoration: BoxDecoration(
                        color: const Color(0xffFFBC60),
                        borderRadius: BorderRadius.circular(12.w),
                      ),
                      child: Text(
                        "copy",
                        style: TextStyle(fontSize: 10.sp, color: Colors.white),
                      ),
                    ),
                  )
                ],
              ),
              SizedBox(height: 36.h),
              Image.asset(
                "images/user_detail_data.png",
                height: 80.h,
              ),
              SizedBox(height: 48.h),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.r),
                  border: Border.all(
                    color: const Color(0xffcccccc),
                    width: 0.5.w,
                  ),
                ),
                padding: EdgeInsets.symmetric(vertical: 16.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _item("images/icon_post.png", "My Posts", () {
                      Get.toNamed(AcRouteNames.myPosts);
                    }),
                    _item("images/icon_blocked_list.png", "Block list", () {
                      Get.toNamed(AcRouteNames.blockedListPage);
                    }),
                    _item("images/icon_about.png", "About", () {
                      Get.toNamed(AcRouteNames.about);
                    }),
                    _item("images/icon_setting.png", "Setting", () {
                      Get.toNamed(AcRouteNames.setting);
                    }),
                  ],
                ),
              )
            ],
          ),
          _title(),
        ],
      ),
    );
  }

  Widget _item(String img, String title, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Image.asset(
            img,
            width: 28.w,
          ),
          SizedBox(height: 14.h),
          Container(
            width: 60.w,
            alignment: Alignment.center,
            child: Text(
              title,
              style: TextStyle(
                fontSize: 10.sp,
                color: const Color(0xff565656),
              ),
            ),
          )
        ],
      ),
    );
  }

  Positioned _title() {
    return Positioned(
      top: ScreenUtil().statusBarHeight,
      child: SizedBox(
        height: 44.h,
        width: 375.w,
        child: Stack(
          children: [
            Positioned(
              left: 20.w,
              top: 0,
              bottom: 0,
              child: GestureDetector(
                onTap: () {
                  Get.toNamed(AcRouteNames.goodsPage);
                },
                child: Row(
                  children: [
                    Container(
                      height: 26.h,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(22.w),
                        gradient: const LinearGradient(
                          colors: [
                            Color(0xFFFFC371),
                            Color(0xFFFF5F6D),
                          ],
                        ),
                      ),
                      child: Row(
                        children: [
                          Image.asset(
                            "images/icon_coin.png",
                            width: 21.w,
                          ),
                          SizedBox(width: 6.w),
                          Obx(() {
                            return Text(
                              "${logic.userInfo.value!.availableCoins}",
                              style:
                              TextStyle(fontSize: 16.sp, color: Colors.white),
                            );
                          })
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              right: 20.w,
              top: 0,
              bottom: 0,
              child: GestureDetector(
                onTap: () {
                  if (logic.strategyModel.userServiceAccountId != null) {
                    LogPvManger.stat(page: LogPages.customerPage);
                    AcChatUtil.openChat(
                        logic.strategyModel.userServiceAccountId!);
                  }
                },
                child: Image.asset(
                  "images/icon_service.png",
                  width: 28.w,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
